<template>
	<view>
		<uni-nav-bar dark title="机构管理" fixed :statusBar="true" left-icon="left" @clickLeft="clickLeft">
			<block slot="right">
				<view class="city">
					<view @click="onCreated">
						<uni-icons type="plusempty" size="20" color="#fff"></uni-icons>
					</view>
				</view>
			</block>
		</uni-nav-bar>
		<view class="list" v-for="(item, index) in list" :key="index" @click="onselect(item.id, item)">
			<view class="userdata">
				<image :src="imageUrl + item.organizationLogo" mode=""></image>
				<view class="info">
					<text>{{item.name}}</text>
					<text>{{listData[item.type]}}</text>
				</view>
			</view>
			
			<view class="type">
				超级管理员
			</view>
		</view>
		<uni-load-more :status="loadingType"></uni-load-more>
	</view>
</template>

<script>
	import {
		getList
	} from '@/api/mechanism/index.js'
	import	{imageUrl} from '@/config.js'
	export default {
		data() {
			return {
				listData: {
					'1' : '协会',
					'2': '公司',
					'3': '学校',
					'4': '其他',
				},
				imageUrl: imageUrl,
				loadingType: 'more',
				list: [],
				pageData: {
					pageNum: 1,
					pageSize: 20,
				},
				total: 0,
				selected: ''
			}
		},
		methods: {
			clickLeft() {
				uni.navigateBack()
			},
			onselect(id, item) {
				if (this.selected) {
					uni.setStorageSync('organizationData', item)
					uni.navigateBack();
					return;
				}
				uni.navigateTo({
					url: '/pages/mechanism/created?id=' + id
				})
			},
			onCreated() {
				uni.navigateTo({
					url: '/pages/mechanism/created' + (this.selected ? '?selected=1' : '')
				})
			},
			_getList() {
				getList(this.pageData).then(res => {
					this.total = res.total
					this.list.push(...res.rows)
					if (this.list.length == this.total) {
						this.loadingType = 'no-more'
						return;
					}
				})
			}
		},
		async onReachBottom() {
			console.log("onReachBottom");
			if (this.list.length == this.total) {
				this.loadingType = 'no-more'
				return;
			}
			this.loadingType = 'loading'
			this.pageData.pageNum += 1
			this._getList()
		},
		onLoad({selected}) {
			this.selected =  selected
			this._getList()
		}
	}
</script>

<style scoped lang="scss">
.list {
	display: flex;
	padding: 30rpx 20rpx 0rpx 20rpx;
	justify-content: space-between;
	align-items: center;
	
	.userdata {
		display: flex;
		align-items: center;
		.info {
			display: flex;
			flex-direction: column;
		    justify-content: space-between;
			text {
				&:nth-child(1) {
					font-size: 30rpx;
				}
				&:nth-child(2) {
					font-size: 24rpx;
					border: 1px solid #ddd;
					width: 80rpx;
					text-align: center;
					padding: 5rpx 0;
					margin-top: 10rpx;
					border-radius: 10rpx;
				}
			}
		}
		
	}
	image {
		width: 80rpx;
		height: 80rpx;
		border-radius: 100rpx;
		margin-right:  20rpx;
	}
	.type {
		font-size: 24rpx;
	}
}
</style>